<html>
    <head>
        <style>
            @import url("https://cdn.jsdelivr.net/gh/superBoyJack/CDN/css/element-ui-index.css");
            @import url("https://at.alicdn.com/t/font_1776564_biuc05tmt1k.css");
            @import url("css/app.css");
        </style>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/superBoyJack/CDN/js/element-ui-index.js"></script>

<div id="app"  style="z-index: 99999;position: fixed;">
    <div class="el-backtop" @click="menuShow = true" >
        <i class="iconfont iconshezhi"></i>
    </div>
    <el-drawer
    :visible.sync="menuShow"
    direction="ltr"
    custom-class="demo-drawer"
    ref="drawer"
    :with-header="false"
    size="33%"
    >
        <el-container>
            <el-header style="background: white;">
                <el-row :gutter="24">
                    <el-col :span="12" :offset="7"><div style="margin-top: 20px;font-size:25px;" ><label >CSDN 助手</label> </div></el-col>
                </el-row>
            </el-header>

            <el-main>
                <el-collapse>
                    <el-collapse-item name="1" >
                        <template slot="title">
                            <div style="text-align: right;width: 400;">
                                <i class="iconfont icondianzan"></i> &nbsp;<span style="font-size:18px">点 赞</span>
                            </div>
                        </template>

                        <!-- 点赞总开关 -->
                        <el-row :gutter="0" style="margin-top: 10px;">
                            <el-col :span="20" :offset="2">
                                <el-tooltip class="item" effect="dark" content="当天点赞次数用完自动关闭" placement="right">
                                    <el-switch
                                        v-model="likeSwitch"
                                        active-value="100"
                                        inactive-value="0"
                                        active-text="打开自动点赞">
                                    </el-switch>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 点赞个性化配置开关 -->
                        <el-row :gutter="0"  v-if="likeSwitch==100" style="margin-top: 20px;">
                            <el-col :span="20" :offset="3">
                                <el-tooltip class="item" effect="dark" content="将会对文章字数、阅读量、发布日期进行筛选配置" placement="right">
                                    <transition name="el-fade-in-linear">
                                        <el-switch
                                            v-model="likeCustom"
                                            active-value="100"
                                            inactive-value="0"
                                            active-text="个性化配置">
                                        </el-switch>
                                    </transition>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 点赞最低字数计数器 -->
                        <el-row :gutter="0" v-if="likeSwitch==100 && likeCustom==100" style="margin-top: 20px;">
                            <el-col :span="22" :offset="5">
                                    <label>最低字数：</label>
                                    <el-input-number 
                                        v-model="likeWordNumber" 
                                        controls-position="right" 
                                        size="small" 
                                        :step="100" 
                                        :min="0" 
                                        :max="10000"
                                        :precision="0">
                                    </el-input-number>
                                <el-tooltip class="item" effect="dark" content="只点赞字数高于这个值的文章" placement="top">
                                    <i class="header-icon el-icon-info"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 点赞最低浏览量 -->
                        <el-row :gutter="0" v-if="likeSwitch==100 && likeCustom==100" style="margin-top: 20px;">
                            <el-col :offset="5">
                                    <span>最低浏览量：</span>
                                    <el-input-number 
                                        v-model="likeReadNumber" 
                                        controls-position="right" 
                                        size="small" 
                                        :step="100" 
                                        :min="0" 
                                        :max="10000"
                                        :precision="0"
                                        label="最低浏览量">
                                    </el-input-number>
                                <el-tooltip class="item" effect="dark" content="只点赞阅读量高于这个值的文章" placement="right">    
                                    <i class="header-icon el-icon-info"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 点赞发文日期选择器 -->
                        <el-row :gutter="0" v-if="likeSwitch==100 && likeCustom==100" style="margin-top: 20px;">
                            <el-col :offset="5">
                                发文日期：
                                <el-select v-model="likeDate" placeholder="请选择日期">
                                    <el-option
                                    v-for="item in dateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    size="mini">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>  

                    </el-collapse-item>

                    <el-collapse-item title="评 论" name="2">
                        <template slot="title">
                            <div style="text-align: right;width: 400;">
                                <i class="iconfont iconpinglun"></i> &nbsp; <span style="font-size:18px">评 论</span>
                            </div>
                        </template>
                        <!-- 评论总开关 -->
                        <el-row :gutter="0" style="margin-top: 10px;">
                            <el-col :span="20" :offset="1">
                                <el-tooltip class="item" effect="dark" content="平台对单位时间评论频率有限制,请注意" placement="right">
                                    <el-switch
                                        v-model="commentSwitch"
                                        active-value="100"
                                        inactive-value="0"
                                        active-text="打开自动评论">
                                    </el-switch>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 评论字数分段开关 -->
                        <el-row :gutter="0" v-if="commentSwitch==100" style="margin-top: 20px;">
                            <el-col :span="20" :offset="3">
                                <el-tooltip class="item" effect="dark" content="将会根据文章字数进行不同的评论" placement="right">
                                    <el-switch
                                        v-model="commentRangeSwitch"
                                        active-value="100"
                                        inactive-value="0"
                                        active-text="字数分段">
                                    </el-switch>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                        <!-- 评论字数分段滑块 -->
                        <el-row :gutter="0"  v-if="commentSwitch==100 && commentRangeSwitch==100" style="margin-top: 10px;">
                            <el-col :span="17" :offset="5">
                                <el-slider
                                    v-model="commentRange"
                                    range
                                    :min="1"
                                    :max="10000">
                                </el-slider>
                            </el-col>
                        </el-row>

                        <!-- 评论个性化配置开关 -->
                        <el-row :gutter="0" v-if="commentSwitch==100" style="margin-top: 20px;">
                            <el-col :span="20" :offset="3">
                                <el-tooltip class="item" effect="dark" content="将会对文章字数、阅读量、发布日期进行筛选配置" placement="right">
                                    <el-switch
                                        v-model="commentCustom"
                                        active-value="100"
                                        inactive-value="0"
                                        active-text="个性化配置">
                                    </el-switch>
                                </el-tooltip>
                            </el-col>
                        </el-row>


                        <!-- 评论最低字数计数器 -->
                        <el-row :gutter="0" v-if="commentSwitch==100 && commentCustom==100" style="margin-top: 20px;">
                            <el-col :span="22" :offset="5">
                                    <label>最低字数：</label>
                                    <el-input-number 
                                        v-model="commentWordNumber" 
                                        controls-position="right" 
                                        size="small" 
                                        :step="100" 
                                        :min="0" 
                                        :max="10000"
                                        :precision="0">
                                    </el-input-number>
                                <el-tooltip class="item" effect="dark" content="只评论字数高于这个值的文章" placement="top">
                                    <i class="header-icon el-icon-info"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                        <!-- 评论最低浏览量计数器 -->
                        <el-row :gutter="0" v-if="commentSwitch==100 && commentCustom==100" style="margin-top: 20px;">
                            <el-col :offset="5">
                                    <span>最低浏览量：</span>
                                    <el-input-number 
                                        v-model="commentReadNumber" 
                                        controls-position="right" 
                                        size="small" 
                                        :step="100" 
                                        :min="0" 
                                        :max="10000"
                                        :precision="0"
                                        label="最低浏览量">
                                    </el-input-number>
                                <el-tooltip class="item" effect="dark" content="只评论阅读量高于这个值的文章" placement="right">    
                                    <i class="header-icon el-icon-info"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                        <!-- 评论发文日期选择器 -->
                        <el-row :gutter="0" v-if="commentSwitch==100 && commentCustom==100" style="margin-top: 20px;">
                            <el-col :offset="5">
                                发文日期：
                                <el-select v-model="commentDate" placeholder="请选择日期">
                                    <el-option
                                    v-for="item in dateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    size="mini">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        

                    </el-collapse-item>
                    <!-- 内容模块 -->
                    <el-collapse-item title="内 容" name="3">
                        <template slot="title">
                            <div style="text-align: right;width: 400;">
                                <i class="iconfont iconwenben" ></i> &nbsp; <span style="font-size:18px">内 容</span>
                            </div>
                        </template>
                        <el-row type="flex" justify="center" style="margin-top: 10px;">
                        <el-tabs type="card">
                            <!-- 随机评论 -->
                            <el-tab-pane label="随机评论">
                                <el-alert
                                    v-if="commentRangeSwitch==100"
                                    title="当前您使用的是字数分段模式,不会随机评论"
                                    type="info"
                                    show-icon
                                    :closable="false">
                                </el-alert>
                                <!-- 随机评论表格 -->
                                <el-table
                                    :data="commentList.R.slice((currentPage.R-1)*currentPage.pageSize,currentPage.R*currentPage.pageSize)"
                                    stripe
                                    style="width: 100%">
                                    <el-table-column type="expand">
                                        <template slot-scope="props">
                                            <span>{{ props.row.text }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="评论内容"
                                        :show-overflow-tooltip='true'
                                        prop="text">
                                    </el-table-column>
                                    <el-table-column  align="right" label="操作">
                                        <template slot="header" slot-scope="scope">
                                            <el-button size="mini" type="success" round>导入</el-button>
                                            <el-button @click="commentNew(0)" size="mini" type="primary" round>新建</el-button>
                                        </template>
                                        <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            @click="commentEdit(scope.$index, scope.row, 0)">编辑</el-button>
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            @click="commentDelete(scope.$index, scope.row, 0)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- 随机评论页码 -->
                                <el-row :gutter="0" type="flex" justify="center" style="margin-top: 10px;">
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :page-size="currentPage.pageSize"
                                        @current-change="currentPageChange_R"
                                        :hide-on-single-page="true"
                                        :total="commentList.R.length">
                                    </el-pagination>
                                </el-row>
                            </el-tab-pane>
                            <!-- 少等字数 -->
                            <el-tab-pane label="少等字数">
                                <el-alert
                                    v-if="commentRangeSwitch==0"
                                    title="在评论里打开字数分段即可使用"
                                    type="info"
                                    show-icon
                                    :closable="false">
                                </el-alert>
                                <el-table
                                :data="commentList.S.slice((currentPage.S-1)*currentPage.pageSize,currentPage.S*currentPage.pageSize)"
                                stripe
                                style="width: 100%">
                                <el-table-column type="expand">
                                    <template slot-scope="props">
                                        <span>{{ props.row.text }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="评论内容"
                                    :show-overflow-tooltip='true'
                                    prop="text">
                                </el-table-column>
                                <el-table-column  align="right" label="操作">
                                    <template slot="header" slot-scope="scope">
                                        <el-button size="mini" type="success" round>导入</el-button>
                                        <el-button @click="commentNew(1)" size="mini" type="primary" round>新建</el-button>
                                      </template>
                                    <template slot-scope="scope">
                                      <el-button
                                        size="mini"
                                        @click="commentEdit(scope.$index, scope.row, 1)">编辑</el-button>
                                      <el-button
                                        size="mini"
                                        type="danger"
                                        @click="commentDelete(scope.$index, scope.row, 1)">删除</el-button>
                                    </template>
                                </el-table-column>
                              </el-table>
                                <el-row :gutter="0" type="flex" justify="center" style="margin-top: 10px;">
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :page-size="currentPage.pageSize"
                                        @current-change="currentPageChange_S"
                                        :hide-on-single-page="true"
                                        :total="commentList.S.length">
                                    </el-pagination>
                                </el-row>
                            </el-tab-pane>
                            <!-- 中等字数 -->
                            <el-tab-pane label="中等字数">
                                <el-alert
                                    v-if="commentRangeSwitch==0"
                                    title="在评论里打开字数分段即可使用"
                                    type="info"
                                    show-icon
                                    :closable="false">
                                </el-alert>
                                <el-table
                                :data="commentList.M.slice((currentPage.M-1)*currentPage.pageSize,currentPage.M*currentPage.pageSize)"
                                stripe
                                style="width: 100%">
                                <el-table-column type="expand">
                                    <template slot-scope="props">
                                        <span>{{ props.row.text }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="评论内容"
                                    :show-overflow-tooltip='true'
                                    prop="text">
                                </el-table-column>
                                <el-table-column  align="right" label="操作">
                                    <template slot="header" slot-scope="scope">
                                        <el-button size="mini" type="success" round>导入</el-button>
                                        <el-button @click="commentNew(2)" size="mini" type="primary" round>新建</el-button>
                                      </template>
                                    <template slot-scope="scope">
                                      <el-button
                                        size="mini"
                                        @click="commentEdit(scope.$index, scope.row, 2)">编辑</el-button>
                                      <el-button
                                        size="mini"
                                        type="danger"
                                        @click="commentDelete(scope.$index, scope.row, 2)">删除</el-button>
                                    </template>
                                </el-table-column>
                              </el-table>
                                <el-row :gutter="0" type="flex" justify="center" style="margin-top: 10px;">
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :page-size="currentPage.pageSize"
                                        @current-change="currentPageChange_M"
                                        :hide-on-single-page="true"
                                        :total="commentList.M.length">
                                    </el-pagination>
                                </el-row>
                            </el-tab-pane>
                            <!-- 多等字数 -->
                            <el-tab-pane label="多等字数">
                                <el-alert
                                    v-if="commentRangeSwitch==0"
                                    title="在评论里打开字数分段即可使用"
                                    type="info"
                                    show-icon
                                    :closable="false">
                                </el-alert>
                                <el-table
                                :data="commentList.L.slice((currentPage.L-1)*currentPage.pageSize,currentPage.L*currentPage.pageSize)"
                                stripe
                                style="width: 100%">
                                <el-table-column type="expand">
                                    <template slot-scope="props">
                                        <span>{{ props.row.text }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="评论内容"
                                    :show-overflow-tooltip='true'
                                    prop="text">
                                </el-table-column>
                                <el-table-column  align="right" label="操作">
                                    <template slot="header" slot-scope="scope">
                                        <el-button size="mini" type="success" round>导入</el-button>
                                        <el-button @click="commentNew(3)" size="mini" type="primary" round>新建</el-button>
                                      </template>
                                    <template slot-scope="scope">
                                      <el-button
                                        size="mini"
                                        @click="commentEdit(scope.$index, scope.row, 3)">编辑</el-button>
                                      <el-button
                                        size="mini"
                                        type="danger"
                                        @click="commentDelete(scope.$index, scope.row, 3)">删除</el-button>
                                    </template>
                                </el-table-column>
                              </el-table>
                                <el-row :gutter="0" type="flex" justify="center" style="margin-top: 10px;">
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :page-size="currentPage.pageSize"
                                        @current-change="currentPageChange_L"
                                        :hide-on-single-page="true"
                                        :total="commentList.L.length">
                                    </el-pagination>
                                </el-row>
                            </el-tab-pane>
                          </el-tabs>
                        </el-row>
                    </el-collapse-item>
                    <!-- 模式配置模块 -->
                    <el-collapse-item title="模 式" name="4">
                        <template slot="title">
                            <div  style="text-align: right;width: 400;">
                                <i class="iconfont iconqiapianmoshi_kuai" ></i> &nbsp; <span style="font-size:18px">模 式</span>
                            </div>
                        </template>
                        <el-row :gutter="0" style="margin-top: 20px;">
                            <el-col :offset="1">
                                模式正在开发中
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <!-- 关于模块 -->
                    <el-collapse-item title="关 于" name="5">
                        <template slot="title">
                            <div  style="text-align: right;width: 400;">
                                <i class="iconfont icon093info" ></i> &nbsp; <span style="font-size:18px">关 于</span>
                            </div>
                        </template>
                        <el-row :gutter="0" style="margin-top: 20px;">
                            <el-col :offset="1">
                                版本：1.0
                            </el-col>
                        </el-row>
                        <el-row :gutter="0" style="margin-top: 10px;">
                            <el-col :offset="1">
                                如果觉得这个插件不错,欢迎给个Star
                            </el-col>
                        </el-row>
                        <el-row :gutter="0" style="margin-top: 15px;">
                            <el-col :offset="2">
                                GitHub:
                                <el-link :underline="false" href="https://github.com/superBoyJack">
                                    <i class="iconfont icongithublogo" style="font-size: 30px;"></i>
                                </el-link>
                            </el-col>
                        </el-row>
                        
                    </el-collapse-item>
                    </el-collapse>
            </el-main>
            
            <el-footer style="text-align:center;">
                <el-button type="primary" @click="postChange()">保 存</el-button>
            </el-footer>
        
        </el-container>
        
    </el-drawer>

    <!-- 编辑评论框 -->
    <el-dialog
        :title="commentDialog.title"
        :visible.sync="commentDialog.visible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="40%"
        center>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入自定义评价"
            maxlength="1000"
            minlength="1"
            show-word-limit
            v-model="commentDialog.text">
        </el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="commentDialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="postComment()" :disabled="commentDialog.checkDisabled()">保存</el-button>
        </span>
    </el-dialog>

</div>
    </body>
    <script>
        function likeConfigChange(){
            console.log("状态改变");
            console.log(document.querySelector("#app").__vue__.likeSwitch);
            console.log(document.querySelector("#app").__vue__.likeCustom);
            console.log(document.querySelector("#app").__vue__.likeWordNumber);
            console.log(document.querySelector("#app").__vue__.likeReadNumber);
            try {
                var likeFullDate = document.querySelector("#app").__vue__.likeDate;
                var likeDate = likeFullDate.getFullYear() + "-" + (likeFullDate.getMonth() + 1) + "-" + likeFullDate.getDate();
            } catch (error) {
                likeDate = "2020-04-21";
            }
           
            console.log(likeDate);
        };
        var Main = {
            data() {
                return {
                    menuShow: false,
                    likeSwitch: 0,
                    likeCustom: 0,
                    likeWordNumber: "",
                    likeReadNumber: "",
                    likeDate: "",
                    commentSwitch: 0,
                    commentCustom: 0,
                    commentWordNumber: 0,
                    commentReadNumber: 0,
                    commentDate: "",
                    commentRangeSwitch: 0,
                    commentRange: [100,2000],                    
                    commentDialog: {
                        visible: false,
                        title: "默认标题",
                        text: "",
                        new: true,
                        source: "",
                        index: "",
                        /* 禁用判断 */
                        checkDisabled(){
                            if(this.text.length == 0){
                                return true;
                            }else{
                                while(this.text.indexOf(" ") >= 0){
                                    this.text=this.text.replace(" ","");
                                }
                            }
                            return false;
                        }
                    },
                    currentPage: {
                        R: 1,
                        S: 1,
                        M: 1,
                        L: 1,
                        pageSize: 5
                    },
                    dateOptions: [{
                        value: this.getDateOption(0),
                        label: '今天'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 7),
                        label: '一周内'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 30),
                        label: '一月内'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 30 * 12),
                        label: '一年内'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 30 * 12 * 2),
                        label: '两年内'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 30 * 12 * 5),
                        label: '五年内'
                        }, {
                        value: this.getDateOption(3600 * 1000 * 24 * 30 * 12 * 10),
                        label: '十年内'
                        }, {
                        value: '1999-12-01',
                        label: '不限'
                        }
                    ],
                    // dateOptions: {
                    //     disabledDate(time) {
                    //         return time.getTime() > Date.now();
                    //     },
                    //     shortcuts: [{
                    //         text: "今天",
                    //         onClick(picker) {
                    //         picker.$emit("pick", new Date());
                    //         }
                    //     },this.getDateShortcut("一周内",3600 * 1000 * 24 * 7),
                    //     this.getDateShortcut("一月内",3600 * 1000 * 24 * 30),
                    //     this.getDateShortcut("一年内",3600 * 1000 * 24 * 30 * 12),
                    //     this.getDateShortcut("两年内",3600 * 1000 * 24 * 30 * 12 * 2),
                    //     this.getDateShortcut("五年内",3600 * 1000 * 24 * 30 * 12 * 5),
                    //     this.getDateShortcut("十年内",3600 * 1000 * 24 * 30 * 12 * 10),
                    //     {
                    //         text: "不限",
                    //         onClick(picker) {
                    //         const date = new Date();
                    //         date.setTime(943977600 * 1000);
                    //         picker.$emit("pick", date);
                    //         }
                    //     }]
                    // },
                    commentList: {
                        R: [
                            {text: "0写的不错哦,欢迎回访我的博客哦"},
                            {text: "1前排支持一下,可以的话来我博客看看吧"},
                            {text: "2我在大佬的评论区瑟瑟发抖,希望能引起注意并回访我的博客哈哈"},
                            {text: "3膜拜技术大佬,来我博客指点江山吧"},
                            {text: "4分享技术,不错哦"},
                            {text: "5少年,我看你骨骼精奇,不如来我博客看看可好"},
                            {text: "6有一天,我在某个人的评论区里写下了这么一句话"},
                            {text: "7学到了,感谢,有空来我博客看看哦"},
                            {text: "8我觉得很可"},
                            {text: "9写的都很不错,向你学习吧"}
                        ],
                        S: [
                            {text: "0虽然字数不多,但是写的非常棒!欢迎回访我的博客"},
                            {text: "1字不在多在于精"},
                            {text: "2少年,我看你骨骼精奇,不如多敲几行字可好"},
                            {text: "3博客破万卷,代码如有神"},
                            {text: "4字不多却铿锵有力"},
                            {text: "5一文不赞何以赞天下"}
                        ],
                        M: [
                            {text: "0写的不错,活到老,学到老!欢迎回访我的博客"},
                            {text: "1欢迎来我博客看看,可以顺手点赞也是极好的"},
                            {text: "2前排支持一下,欢迎回访我的博客"},
                            {text: "3都是干货,谢谢了,欢迎回访我的博客"},
                            {text: "4向你学习,欢迎回访我的博客"},
                            {text: "5写的真好,如果可以,欢迎回访我的博客"}
                            
                        ],
                        L: [
                            {text: "0写了这么多字,手动码字一定很累吧!欢迎回访我的博客"},
                            {text: "1我在大佬的评论区瑟瑟发抖,欢迎大佬回访我的博客"},
                            {text: "2膜拜技术大佬,来我博客指点江山吧"},
                            {text: "3收获满满,码字不易,欢迎回访我的博客"},
                            {text: "4不曾想,若是有一天我能像你一样写出这么好的博客该多好,欢迎来我的博客指点"},
                            {text: "5天若有情天亦老,来我博客看看可好"}
                            
                        ]
                    },
                };
            },
            // computed: {
            //     timeDefault() {
            //         var date = new Date();
            //         var s1 = (date.getFullYear()-2) + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
            //         return s1;
            //     }
            // },
            mounted() {
                this.initItem("likeSwitch",0);
                this.initItem("likeCustom",0);
                this.initItem("likeWordNumber",100);
                this.initItem("likeReadNumber",100);
                this.initItem("likeDate",this.getDateOption(3600 * 1000 * 24 * 30 * 12));

                this.initItem("commentSwitch",0);
                this.initItem("commentCustom",0);
                this.initItem("commentWordNumber",100);
                this.initItem("commentReadNumber",100);
                this.initItem("commentDate",this.getDateOption(3600 * 1000 * 24 * 30 * 12));
                this.initItem("commentRangeSwitch",0);
                this.initItem("commentRange",[100,2000]);

                this.initItem("commentList",this.commentList);

                if(!localStorage.today){
                    var date = new Date();
                    localStorage.today = date.getDate();
                }

            },
            methods: {
                /* 初始化localStorage */
                initItem(item,value){
                    if (localStorage[item]) {
                        switch (item) {
                            case "commentRange":
                                var str = localStorage.commentRange;
                                this.commentRange = [str.split(",")[0],str.split(",")[1]];
                                break;
                            case "commentList":
                                this.commentList = JSON.parse(localStorage.commentList);
                                break;
                            default:this[item] = localStorage[item];
                                break;
                        }
                        // if(item=="commentRange"){
                        //     var str = localStorage.commentRange;
                        //     this.commentRange = [str.split(",")[0],str.split(",")[1]];
                        //     return;
                        // }
                        // if(item == "commentList"){
                        //     this.commentList = JSON.parse(localStorage.commentList);
                        //     return;
                        // }
                        // this[item] = localStorage[item];
                    }else{
                        switch (item) {
                            case "commentList":
                                this.commentList = value;
                                localStorage.commentList = JSON.stringify(value);
                                break;
                        
                            default:this[item] = localStorage[item] = value;
                                break;
                        }
                        // if(item == "commentList"){
                        //     this[item] = value;
                        //     localStorage[item] = JSON.stringify(value);
                        //     return;
                        // }
                        // this[item] = localStorage[item] = value;
                    }
                },
                /**
                 *评论类别码
                 * 0:随机评论
                 * 1:少字数评论
                 * 2:中等字数评论
                 * 3:多字数评论
                 * */
                getCommentType(type){
                    var str;
                    switch (type) {
                        case 0:
                            str = "R";
                            break;
                        case 1:
                            str = "S";
                            break;
                        case 2:
                            str = "M";
                            break;
                        case 3:
                            str = "L";
                            break;
                        default:
                            break;
                    }
                    return str;
                },
                // getDateShortcut(text,time){
                //     var short = {
                //         text: text,
                //         onClick(picker) {
                //             const date = new Date();
                //             date.setTime(date.getTime() - time);
                //             picker.$emit("pick", date);
                //         }
                //     };
                //     return short;
                // },
                /* 负责日期选择器的日期格式化:时间戳减去多少毫秒之前 */
                getDateOption(time){
                    var date = new Date();
                    date.setTime(date.getTime() - time);
                    return (date.getFullYear()) + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
                },
                /* 新建评论 */
                commentNew(type){
                    this.commentDialog.new = true;
                    this.commentDialog.title = "新建评论";
                    this.commentDialog.source = this.getCommentType(type);
                    this.commentDialog.text = "";
                    this.commentDialog.visible = true;
                },
                /* 编辑评论 */
                commentEdit(index, row, type) {
                    /* 获取到R-S-M-L */
                    var typeCode = this.getCommentType(type);
                    /* 通过当前页码,选中表格的行数以及页码尺寸获得在数组中的固定序列:0+(2-1)*5=5,第二页的第一行即数组的下标为5 */ 
                    var staticIndex = index + ((this.currentPage[typeCode]-1)*this.currentPage.pageSize);
                    this.commentDialog.new = false;
                    this.commentDialog.title = "编辑评论";
                    this.commentDialog.source = typeCode;
                    this.commentDialog.text = this.commentList[typeCode][staticIndex].text;
                    this.commentDialog.index = index;
                    this.commentDialog.visible = true;
                },
                /* 删除评论 */
                commentDelete(index, row, type) {
                    var typeCode = this.getCommentType(type);
                    var staticIndex = index + ((this.currentPage[typeCode]-1)*this.currentPage.pageSize);
                    this.commentList[typeCode].splice(staticIndex,1);
                    this.saveComment();
                },
                /* 以下4个负责监控分页的变化并实时反馈 */
                currentPageChange_R(page){
                    this.currentPage.R = page;
                },
                currentPageChange_S(page){
                    this.currentPage.S = page;
                },
                currentPageChange_M(page){
                    this.currentPage.M = page;
                },
                currentPageChange_L(page){
                    this.currentPage.L = page;
                },
                /* 提交评论内容到Vue */
                postComment(){
                    var comment = {text:this.commentDialog.text}
                    if(this.commentDialog.new){
                        this.commentList[this.commentDialog.source].push(comment);
                    }else{
                        this.commentList[this.commentDialog.source][this.commentDialog.index] = comment;
                    }
                    this.saveComment();
                    this.commentDialog.visible = false;
                },
                /* 保存到localStorage */
                saveComment(){
                    localStorage.commentList = JSON.stringify(this.commentList);
                },
                postChange(){
                    /* 点赞配置保存到localStorage */
                    localStorage.likeSwitch = this.likeSwitch;
                    localStorage.likeCustom = this.likeCustom;
                    localStorage.likeWordNumber = this.likeWordNumber;
                    localStorage.likeReadNumber = this.likeReadNumber;
                    var like_Date = new Date(this.likeDate);
                    localStorage.likeDate = (like_Date.getFullYear()) + "-" + (like_Date.getMonth() + 1) + "-" + (like_Date.getDate());

                    /* 评论配置保存到localStorage */
                    localStorage.commentSwitch = this.commentSwitch;
                    localStorage.commentCustom = this.commentCustom;
                    localStorage.commentWordNumber = this.commentWordNumber;
                    localStorage.commentReadNumber = this.commentReadNumber;
                    localStorage.commentRangeSwitch = this.commentRangeSwitch;
                    localStorage.commentRange = this.commentRange;
                    var comment_Date = new Date(this.commentDate);
                    localStorage.commentDate = (comment_Date.getFullYear()) + "-" + (comment_Date.getMonth() + 1) + "-" + (comment_Date.getDate());

                    this.menuShow = false;
                },
                
            }
        };
        var Ctor = Vue.extend(Main);
        var ctor = new Ctor();
        ctor.$mount("#app");
        
    </script>
</html>
